<template>
    <div class='shopcar-container'>
        <div class="goods-list">
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						
                        <mt-switch></mt-switch>
                        <img src="../../images/goodsinfo3.jpg">
                        <div class="info">
                            <h1>Apple/苹果 iPhone X 64G 全网通4G智能手机</h1>
                            <p>
                                <span class='price'>￥2199</span>
                                <numbox></numbox>
                                <a href="#">删除</a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
        </div>

        <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
				</div>
			</div>
		</div>
    </div>
</template>

<script>
import numbox from '../../components/subcomponents/shopcar_numberbox.vue'
export default {
    components:{
        numbox
    }
}
</script>

<style lang="scss" scoped>
 .shopcar-container{

    background-color:#eee;
    overflow: hidden;

    .goods-list{
        img{
            width: 65px;
            height: 65px;
            margin: 0 8px;
        }

        h1{
            font-size: 12px;
        }

        

        .mui-card-content-inner{
            display: flex;
            align-items: center;
            padding:15px 2px;

            .info{
                 p{
                    .price{
                        color:red;font-weight: bold;
                    }
                    
                    margin-bottom: 0px;
                }
            } 

           
        }
    }
 }

</style>

